$(function () {
    let id = $("#blog_id").val();
    console.info(id);
    $.ajax({
        url: "/blog/" + id,
        type: "get",
        success: function (data) {
            console.info(data)
            if (data.code === 1000) {
                displayData(data.data);
            } else {
                swal("错误");
            }
        }
    });

    $.ajax({
        url: "/count/" + id,
        type: "get",
        success: function (data) {
            console.info("commentCount" + JSON.stringify(data));
            $("#commentNumber").text(data.data);
            displayCommentPage(data.data, id);
        }
    });


    $("#back-top").hide();
    $(window).scroll(function () {
        if ($(this).scrollTop() > 300) {
            $('#back-top').fadeIn();
        } else {
            $('#back-top').fadeOut();
        }
    });
    // scroll body to 0px on click
    $('#back-top a').click(function () {
        $('body,html').animate({
            scrollTop: 0
        }, 800);
        return false;
    });

    refreshImg();

    // $('article h1, article h2, article h3, article h4, article h5').find('a').removeAttr('target')

});

function refreshImg() {
    let p = {p: new Date()};
    $.ajax({
        url: "/comment/kaptcha",
        type: "post",
        contentType: "application/json",
        data: JSON.stringify(p),
        success: function (data) {
            console.info(data.msg);
            let s = 'data:image/jpeg;base64,' + data.data.img;
            console.info(s);
            // $(".pointer").src= s;            //没用!!!!!
            $("#pointer").attr('src', s);
        }
    })
}

function displayCommentPage(total, id) {
    let item_page = 5;
    console.info("total:" + total);
    $("#div-page").pagination(total, {
        num_edge_entries: 3,        //省略号后面的页数
        num_display_entries: 4,     //省略号前面的页数
        current_page: 0,
        callback: function (page) {
            console.log("=========" + page);
            queryComment(page, item_page, id);
        },
        items_per_page: item_page,           //每页显示的条目
        prev_text: '上一页',
        next_text: '下一页',
        prev_show_always: true,
        next_show_always: true
    })
}

function queryComment(page, item, id) {
    let data = {limit: item, offset: page};
    $.ajax({
        url: "/comment/" + id,
        type: "post",
        contentType: "application/json",
        data: JSON.stringify(data),
        success: function (data) {
            if (data.code === 1000) {
                console.info(data);
                displayComment(data.data);
            } else {
                swal("错误");
            }
        }
    });
}

function displayComment(data) {
    let hide = $("#div-page");
    if (data.length === 0) {
        hide.hide();
        return;
    }
    hide.show();
    $("#comments").empty();
    $(data).each(function (index) {
        let datum = data[index];
        let time = new Date(datum.time);
        let fullYear = time.getFullYear();
        let month = time.getMonth() + 1;
        let date = time.getDate();
        let hours = time.getHours();
        let minutes = time.getMinutes();
        let seconds = time.getSeconds();
        let time1 = fullYear + "-" + month + "-" + date + " " + hours + ":" + minutes + ":" + seconds;

        let s = "<article class=\"comment\">\n" +
            "            <header class=\"clearfix\">\n" +
            "                <img style='width: 40px;height: 40px' src=\"/blog/default/img/avatar.png\" class=\"avatar\">\n" +
            "                <div class=\"meta\">\n" +
            "                    <h3 style='display: inline; font-size: 22px;margin-left: -50px;font-weight: 200'>" + datum.username + "</h3>\n" +
            "                    <span class=\"date\" style='display: inline; float: right;'>\n" +
            "                          " + time1 +
            "                    </span>\n" +
            "                </div>\n" +
            "            </header>\n" +
            "            <div class=\"body\" style='margin-left: 60px;padding: 10px'>\n" +
            "               <p style='display: inline;'>\n" +
            "                   " + datum.content +
            "               </p>\n" +
            "               <a href='javascript:;' onclick='alert(\"回复\")' style='color: #00b0e8;display: inline; margin-left: 10px;float: right'>\n" +
            "                   " + '回复' +
            "               </a>" +
            "            </div>\n" +
            "        </article>";
        $("#comments").append(s);
    })

}

function displayData(data) {
    $("#h-title").text(data.title);
    $("#p-content").text(data.content);
    $("#p-views").text(data.views);
    $("#a-tag").text(data.catalogue_name);
    let date = new Date(data.time);
    let fullYear = date.getFullYear();
    let month = date.getMonth() + 1;
    let date1 = date.getDate();
    // let hours = date.getHours();
    // let minutes = date.getMinutes();
    // let seconds = date.getSeconds();
    $("#p-time").text(fullYear + "-" + month + "-" + date1);
}
